/* eslint-disable @next/next/no-img-element */
import * as React from "react";
import { IArticle } from "../../types";
import styles from "./style.module.scss";
import IconFont from "../../assets/icon";
import Link from "next/link";
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import "highlight.js/styles/vs.css";
import "bytemd/dist/index.min.css";
import { Viewer } from "@bytemd/react";

const plugins = [
  gfm(),
  highlight(),
  // Add more plugins here
];

interface Props {
  item: IArticle;
}

export default function ArticleItem(props: Props) {
  return (
    <Link href={"/article/" + props.item._id} passHref>
      <div className={styles.articleItem}>
        <div className={styles.author}>
          <div className={styles.avatars}>
            <div
              style={{
                backgroundImage: `url(/api/article/download/${props.item.user[0].avatar})`,
                height: "30px",
                width: "30px",
                borderRadius: "30px",
                backgroundSize: "cover",
              }}
            ></div>
          </div>
          <div className={styles.nickname}>{props.item.user[0].nickname}</div>
        </div>

        <div>
          <div className={styles.title}>{props.item.title}</div>
          <div className={styles.content}>
            <Viewer value={props.item.content} plugins={plugins} />
          </div>
        </div>

        <div className={styles.hot}>
          <div className={styles.num}>
            发布于：
            {new Date(props.item.time).toLocaleDateString() +
              " " +
              new Date(props.item.time).toLocaleTimeString()}
          </div>
          <div className={styles.num}>
            <IconFont
              className={styles.icon}
              type="icon-iconzhengli_liulan"
            ></IconFont>
            {props.item.views}
          </div>
          <div className={styles.num}>
            <IconFont className={styles.icon} type="icon-dianzan" />
            {props.item.likes}
          </div>
        </div>
      </div>
    </Link>
  );
}
